<template>
  <div>
    <div>
        <div v-show="showtopmsg">
            <span v-if="top_msg.priority > 1">
                <van-notice-bar mode="closeable" @click="close_top(top_msg)">
                    {{top_msg.title}}
                </van-notice-bar>
            </span>
            <span v-else>
                <van-notice-bar  mode="closeable" color="#1989fa" background="#ecf9ff">
                    {{top_msg.title}}
                </van-notice-bar>
            </span>
        </div>
        <p v-for='msg in message_list'>
            <a  @click="click_msg(msg)" v-if='msg.sendtime'>{{msg.title}}</a>
        </p>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return {
            message_list:[],
            showtopmsg:0,
            top_msg:{},
            check_list:{},
            province:'',
            pc:['Windows','Linux','Macintosh'],
            iphone:['iPhone','iPad'],
            android:['Android'],
            model:'',
        }
    },
    sockets:{
        connect: function(){
            console.log('socket 连接成功')
        },
        timing_send:function(val){
            var msg_data = JSON.parse(val)
            console.log(msg_data)
            this.top_msg= msg_data
            this.showtopmsg=1
            this.message_list.unshift({
                is_set_timing: '',
                machine_type: msg_data.check_list,
                place: msg_data.place,
                priority: msg_data.priority,
                sendtime: '',
                timing:'',
                title:msg_data.title,
            });
        },
        message: function(val){
            var msg_data = JSON.parse(val)
            console.log(msg_data)
            this.top_msg= msg_data
            this.showtopmsg=1
            this.message_list.unshift({
                is_set_timing: '',
                machine_type: msg_data.check_list,
                place: msg_data.place,
                priority: msg_data.priority,
                sendtime: '',
                timing:'',
                title:msg_data.title,
            });

        },

    },
    created(){
        
        this.get_ip_place()
        this.get_Mobile()
    },
    mounted(){
        window.addEventListener("beforeunload",e=>{
            this.beforeunloadHandler(e);
        });
    },
    destroyed(){
        window.removeEventListener("beforeunload", e=>{
            this.beforeunloadHandler(e);
        });
    },
    watch:{
        province:function(val){
            this.get_messages_push()
        }
    },
    methods:{
        get_ip_place:function(){
          this.axios.get('https://restapi.amap.com/v3/ip?parameters',{params:{'key':'c8165322c2c48892f90ccda1aef617cf'}}).then(res=>{
           this.province = res.data.province.slice(0,2)
          })
        },
        get_Mobile() {
            this.flag = navigator.userAgent.match(
              /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|windows)/i
            );
            console.log(this.flag[0]);      
            if (this.pc.indexOf(this.flag[0])!= -1){
                this.model = 'PC'
                console.log(this.model)
            }else if(this.iphone.indexOf(this.flag[0])!= -1){
                this.model = 'iPhone'
            }else if(this.android.indexOf(this.flag[0])!= -1){
                this.model = 'Android'
            }
        },
        beforeunloadHandler(e) {
            e = e || window.event;
            if(e){
                e.returnValue = "您是否确认离开此页面-您输入的数据可能不会被保存";
            }
            console.log('测试')
            this.axios.get('http://localhost:5000/cont_check/',{params:{'check_list':this.check_list}}).then(res=>{
                console.log(res)
            })
            return "您是否确认离开此页面-您输入的数据可能不会被保存";
        },
        get_messages_push(){
            axios.get('http://127.0.0.1:5000/get_messages_push/',{params:{'province':this.province,'model':this.model}}).then(res=>{
                console.log(res.data)
                this.message_list=res.data.data
            })
        },
        close_top(e){
            console.log(e)
            //console.log(e.srcElement)
        },
        // 计算点击率
        click_msg(data){
            if (this.check_list[data.title]){
                this.check_list[data.title]+=1
            }else{
                this.check_list[data.title]=1
            }
           console.log(this.check_list)  
        }
    }
}
</script>

<style>

</style>
